<template>
	<view @click="clickFillRecordItem" class="fill-record-item">
		<view class="title">
			<view class="title-text">{{data.lineSiteSectionList ? data.lineSiteSectionList.map(item => item.lineSiteSectionName).join(",") : ""}}</view>
			<view :class="[type === 1 ? 'upload' : type === 2 ? 'no-upload' : '']" class="title-label">
				<text>{{type === 1 ? "已上传" : type === 2 ? "未上传" : ""}}</text>
			</view>
		</view>
		
		<view style="margin-top: 16upx; line-height: 28upx; font-size: 20upx; color: #6a819e; display: flex; align-items: center;">
			<u-icon name="clock" color="#6a819e" size="16"></u-icon>
			<text style="margin-left: 4upx;">提交时间：{{data.recordCreateDate}} | {{data.submitUserName}}</text>
		</view>
		
		<view  class="image-list">
			<image v-if="data.signatureFileArray && data.signatureFileArray.length" @click.stop="previewImage(data.signatureFileArray[0].url)" :src="data.signatureFileArray[0].url" mode="aspectFill"></image>
		</view>
		
		<view v-if="type" style="color: #faa500; font-size: 28upx; font-weight: 500; line-height: 38upx;">含危险作业或安全设施，需上传现场照片</view>
		
		<view @click.stop="clickUploadImage" v-if="type" style="display: flex; align-items: center; justify-content: center; height: 96upx; background: #f5f7fa; border-radius: 4upx; margin: 40upx 32upx 0;">
			<image src="/static/image/icon-upload-fill.png" mode="aspectFill" style="width: 60upx; height: 60upx; margin-right: 10upx;"></image>
			<view style="color: #445469; font-weight: bold;">上传照片</view>
		</view>
	</view>
</template>

<script>	
	export default {
		name: "fill-record-item",
		props: {
			/**
			 * 当前组件的类型 
			 * 参考蓝湖地址：https://lanhuapp.com/web/#/item/project/detailDetach?pid=78dfd8f8-40b8-45cc-8521-66aa786384ea&project_id=78dfd8f8-40b8-45cc-8521-66aa786384ea&image_id=8c16eb70-0af1-4b84-81cc-3690028a1985&fromEditor=true
			 * - 0: 没有上传照片按钮的那种  1: 已上传的那种  2: 未上传的那种
			 * */
			type: {
				type: Number,
				default: 0
			},
			/** 数据 */
			data: {
				type: Object,
				default: () => ({}),
			},
			/** 页面的类型 - 0: 综合大修下的  1: 工程维保下的 */
			pageType: {
				type: Number,
				default: 0
			},
		},
		methods: {
			/** 点击上传照片 */
			clickUploadImage() {
				uni.setStorageSync("_temp_fill_record_details", this.data);
				uni.navigateTo({ url: `/subpackage-disclose/pages/scene-picture?type=${this.pageType}` });
			},
			
			/** 点击某一项 */
			clickFillRecordItem() {
				uni.setStorageSync("_temp_fill_record_details", this.data);
				uni.navigateTo({ url: "/subpackage-disclose/pages/disclose-details" });
			},
			
			/** 预览图片 */
			previewImage(url) {
				uni.previewImage({ urls: [url] });
			},
		}
	}
</script>

<style scoped lang="scss">
	.fill-record-item {
		background: #fff;
		border-radius: 20upx;
		padding: 20upx 26upx;
		
		.title {
			color: #22204e;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.title-text {
				line-height: 40upx;
				max-width: 456upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.title-label {
				color: #fff;
				font-size: 28upx;
				width: 108upx;
				line-height: 34upx;
				position: relative;
				text-align: center;
				display: none;
				
				&::before {
					content: "";
					position: absolute;
					top: 0; right: 0; bottom: 0; left: 0;
					transform: skew(-15deg);
				}
				
				text {
					position: relative;
					line-height: inherit;
				}
			}
			
			.no-upload {
				display: block;
				&::before {
					background: linear-gradient(90deg, #FF882B 0%, #FF9F3D 100%);
				}
			}
			
			.upload {
				display: block;
				&::before {
					background: linear-gradient(90deg, #19C585 0%, #61C9A5 100%);
				}
			}
		}
	
		.image-list {
			display: flex;
			flex-wrap: wrap;
			margin: 32upx 0 14upx;
			
			image {
				width: 204upx;
				height: 174upx;
				margin-right: 10upx;
				margin-bottom: 10upx;
			}
		}
	}
</style>
